import { Component, ViewChild, HostListener, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Rx';

import { ChartSchema } from './chart.schema'

declare var require: any;
const Highcharts = require('highcharts/highstock');

Highcharts.setOptions({
  global: ChartSchema.gloabl,
  lang: ChartSchema.lang
});

const groupingConfig = {
  enabled: !0,
  approximation: 'average',
  units: [
    ['week', [1]],
    ['month', [1, 2, 3, 4, 6]]
  ],
  groupPixelWidth: 1
};

@Component({
  selector: 'eq-chart',
  templateUrl: './chart.component.html'
})
export class ChartComponent implements OnChanges, OnInit {
  @ViewChild('chart') chart;

  @Input()
  data;

  @Input()
  width: any = 500;

  @Input()
  height: any = 600;

  yAxis: any;

  title = 'eq-chart';
  overallReturnList: any[];
  benchmarkList: any[];
  excessList: any[];
  options: any = {};

  constructor() {}

  ngOnChanges() {}

  ngOnInit() {
    this.yAxis = ChartSchema.yAxis;
    this.options = {
      chart: {
        type: 'line',
        width: this.width,
        height: this.height,
        animation: Highcharts.svg
      },
      credits: ChartSchema.credits,
      title: ChartSchema.title,
      series: ChartSchema.series,
      tooltip: ChartSchema.tooltip,
      scrollbar:{enabled: false},
      exporting:{enabled: false},
      colors: ChartSchema.colors,
      navigator: ChartSchema.navigator,
      rangeSelector: {
        buttonPosition: {
          x: -4,
          y: 0
        },
        buttonSpacing: 0,
        buttonTheme: { // 设置范围选择样式
          fill: 'none',
          stroke: '#E6E9EE',
          'stroke-width': 1,
          r: 0,
          width: 46,
          float: 'left',
          style: {
            color: '#333333'
          },
          states: {
            hover: {
            },
            select: {
              fill: '#8997AB',
              style: {
                color: '#FFFFFF'
              }
            }
          }
       },
       inputBoxBorderColor: '#CDD7E1',
       inputPosition: {
         x: 30
       },
       inputBoxWidth: 100,
       inputBoxHeight: 16,
       inputStyle: {
         color: '#333333'
       },
       labelStyle: {
         color: '#333333'
       },

       selected: 4,
       enabled: true,
       buttons: ChartSchema.buttons,
       inputEnabled: true,
       inputDateFormat: '%Y-%m-%d'
      },
      plotOptions: ChartSchema.plotOptions,
      yAxis: this.yAxis,
      xAxis: {
        gridLineWidth: 1,
        gridLineColor: 'lightgray',
        categories:[],
        type: 'datetime',
        tickPixelInterval:150,
        labels: {
          style:{
            fontSize: '10px'
          },
          formatter: function () {
            return Highcharts.dateFormat('%y-%m-%d %H:%M', this.value);
          }
        }
      }
    }
    this.ngOnloadData(this.data);
  }

  parseSeries = function(serieList) {
    let result = [];
    let timeList = serieList.time;
    let valueList = serieList.value;
    timeList.map(function(item, index) {
      result.push({
        x: item,
        y: valueList[index]
      });
    });
    return result;
  }

  // 获得超额收益
  getExcessList = function(benchmarkList, overallReturnList) {
    let result = [];

    if (benchmarkList.length && overallReturnList.length) {
      benchmarkList.map((item, index) => {
        result.push({
          x: item.x,
          y: ((overallReturnList[index].y + 100) / (item.y + 100) * 100) - 100
        });
      });
    };
    return result;
  };

  ngOnloadData(config) {
    let benchmarkList;
    let overallReturnList;
    let excessList;
    benchmarkList = this.parseSeries(config.benchmark);
    overallReturnList = this.parseSeries(config.overallReturn);
    excessList = this.getExcessList(benchmarkList, overallReturnList);
    this.options.series[0].data = overallReturnList;
    this.options.series[1].data = benchmarkList;
    this.options.series[2].data = excessList;
  }

  ngOnSaveInstance(chartInstance) {
    this.chart = chartInstance;
  }
}
